<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta name="wechat-enable-text-zoom-em" content="true">

    <link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <script src="index.js"></script>

    <title>闪客的聊天室</title>
</head>
<body>

<div id="nickname_page" class="page">
    <div class="weui-form">
        <div class="weui-form__bd">
            <div class="weui-form__text-area">
                <h2 class="weui-form__title">超级简单的聊天室</h2>
                <br>
                <div class="weui-form__desc">制作人：闪客</div>
                <div class="weui-form__desc">公众号：无聊的闪客</div>
            </div>
            <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells">
                        <label for="nicknameInput" class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><span class="weui-label">你的昵称</span></div>
                            <div class="weui-cell__bd">
                                <input id="nicknameInput" class="weui-input" placeholder="请填写昵称" required></input>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="weui-form__ft">
            <div class="weui-form__opr-area">
                <button onclick="enterChat()" class="weui-btn shanke-btn_primary">进入聊天室</button>
            </div>
        </div>
    </div>
</div>

<div id="chatroom_page" class="page" style="display:none;">
    <div class="weui-cells__group" style="height: 90vh; width: min(600px, 90%); margin: 30px auto">
        <!-- 置顶显示热度 -->
        <div id="topHotBox" style="height: 3%; margin: 5px; padding: 10px; color: cornflowerblue">
            <span>热度值：</span><span id="hotPeople">0</span><span>人（表示累计进入人次）</span>
        </div>
        <!-- 全部消息内容框 -->
        <div id="adminChatBox"
             style="height: 3%; overflow-y: auto; border: 1px solid cornflowerblue; margin: 5px; padding: 10px;">
            <div id="adminMessages"
                 style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal; color: cornflowerblue"></div>
        </div>
        <div id="adminTongzhiBox"
             style="height: 20%; overflow-y: auto; border: 1px solid forestgreen; margin: 5px; padding: 10px;">
            <div rows="1" id="adminTongzhi"
                 style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal; color: forestgreen"></div>
        </div>
        <!-- 全部消息内容框 -->
        <div id="chatBox"
             style="height: 45%; overflow-y: auto; border: 1px solid #b2c4cb; margin: 5px; padding: 10px;">
            <div id="messages" style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal;"></div>
        </div>
        <!-- 全部消息内容框 -->
        <div id="sendBox"
             style="display: flex; align-items: flex-end; height: auto; justify-content: space-between; padding: 5px;">
                <textarea id="message" rows="1" class="weui-input" placeholder="发送的消息" required
                          onfocus="scrollToBottom()" oninput="scrollToBottom()"
                          style="width: 100%; height:auto; line-height: 20px; padding: 10px; margin: 0; border: 1px solid #b7c5cb; overflow-y:hidden; resize: none; font-size: 16px"></textarea>

            <div class="container"
                 style="margin-left: 5px; padding-left: 5px; margin-bottom: 1px; padding-bottom: 1px">
                <button id="sendMessageBtn" onclick="sendMessage()"
                        class="weui-btn weui-btn_primary"
                        style="width: 70px; padding: 6px 2px">发送
                </button>
            </div>
        </div>
    </div>
</div>

</div>

</body>

</html>

